<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <h1>{{msg}}</h1>
        <button @click="test">test</button>
        <div ref="testDom">测试是否能操作DOM</div>
        <button @click="del">销毁vue实例</button>
    </div>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                msg:'zihao'
            },
            methods: {
                test(){
                    console.log('test哪个时刻能使用');
                    this.msg = 'yangyang';
                },
                del(){
                    // 销毁vue实例
                    this.$destroy();
                }
            },
            // vue实例创建前 根元素 data 计算属性 侦听器 方法 事件等等都未初始化 
            beforeCreate() {
                console.log('beforeCreate');
                console.log(this.msg);
                console.log(this.test);
                console.log(this.$el);
            },
            // vue实例创建后  data 计算属性 计算属性 侦听器 方法 事件都完成初始化  但是根元素未初始化 不能直接操作DOM
            created(){
                console.log('created');
                console.log(this.msg);
                console.log(this.test);
                console.log(this.$el);
            },
            //vue实例挂载前  data 计算属性 计算属性 侦听器 方法 事件都完成初始化  根元素初始化完成  但是不能操作DOM
            beforeMount(){
                console.log('beforeMount');
                console.log(this.msg);
                console.log(this.test);
                console.log(this.$el);
                console.log(this.$refs.testDom)
            },
            // vue实例挂载后  data 计算属性 计算属性 侦听器 方法 事件都完成初始化  根元素初始化完成  能操作DOM
            // 挂载  el被新创建的vm.$el替换 就能操作DOM  
            // 当页面不销毁 挂载只执行一次
            // ajax请求可以在mounted当中执行
            mounted(){
                console.log('mounted');
                console.log(this.msg);
                console.log(this.test);
                console.log(this.$el);
                console.log(this.$refs.testDom)
            },
            // 当页面更改前   当页面更改时就可以触发
            beforeUpdate() {
                console.log('beforeupdate');
            },
            // 更改后
            updated() {
                console.log('updated')
            },
            // 销毁前
            beforeDestroy() {
                // 收尾工作在在此处处理  例如定时器  页面传参 
                console.log('beforeDestroy')
            },
            destroyed() {
                console.log('destroyed');
            },
        })
    </script>
</body>
</html>